{
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/img"
  },

  "mixins": [ "composables/private/use-ratio" ],

  "props": {
    "src": {
      "type": "String",
      "desc": "Path to image",
      "transformAssetUrls": true,
      "examples": [
        "(public folder) src=\"img/something.png\"",
        "(assets folder) src=\"~assets/my-img.gif\"",
        "(relative path format) :src=\"require('./my_img.jpg')\"",
        "(URL) src=\"https://picsum.photos/500/300\""
      ],
      "category": "model"
    },

    "srcset": {
      "type": "String",
      "desc": "Same syntax as <img> srcset attribute",
      "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
      "examples": [
        "elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w"
      ],
      "category": "model"
    },

    "sizes": {
      "type": "String",
      "desc": "Same syntax as <img> sizes attribute",
      "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
      "examples": [
        "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
      ],
      "category": "model"
    },

    "placeholder-src": {
      "type": "String",
      "desc": "While waiting for your image to load, you can use a placeholder image",
      "transformAssetUrls": true,
      "examples": [
        "(public folder) placeholder-src=\"img/some-placeholder.png\"",
        "(assets folder) placeholder-src=\"~assets/my-placeholder.gif\"",
        "(relative path format) :placeholder-src=\"require('./placeholder.jpg')\"",
        "(URL) placeholder-src=\"https://picsum.photos/500/300\""
      ],
      "category": "model"
    },

    "error-src": {
      "type": "String",
      "desc": "In case your image fails to load, you can use an error image",
      "transformAssetUrls": true,
      "examples": [
        "(public folder) error-src=\"img/some-placeholder.png\"",
        "(assets folder) error-src=\"~assets/my-placeholder.gif\"",
        "(relative path format) :error-src=\"require('./placeholder.jpg')\"",
        "(URL) error-src=\"https://picsum.photos/500/300\""
      ],
      "category": "model",
      "addedIn": "v2.15"
    },

    "ratio": {
      "desc": "Force the component to maintain an aspect ratio",
      "examples": [
        "(Number format) :ratio=\"16/9\"",
        "(String format) ratio=\"1\""
      ]
    },

    "initial-ratio": {
      "type": [ "String", "Number" ],
      "desc": "Use it when not specifying 'ratio' but still wanting an initial aspect ratio",
      "default": "16/9",
      "examples": [
        "(Number format) :initial-ratio=\"16/9\"",
        "(String format) initial-ratio=\"1\""
      ],
      "category": "style"
    },

    "width": {
      "type": "String",
      "desc": "Forces image width; Must also include the unit (px or %)",
      "examples": [
        "280px",
        "70%"
      ],
      "category": "style"
    },

    "height": {
      "type": "String",
      "desc": "Forces image height; Must also include the unit (px or %)",
      "examples": [
        "280px",
        "70%"
      ],
      "category": "style"
    },

    "loading": {
      "type": "String",
      "desc": "Lazy or immediate load; Same syntax as <img> loading attribute",
      "default": "lazy",
      "values": [ "lazy", "eager" ],
      "category": "behavior"
    },

    "loading-show-delay": {
      "type": [ "Number", "String" ],
      "desc": "Delay showing the spinner when image changes; Gives time for the browser to load the image from cache to prevent flashing the spinner unnecessarily; Value should represent milliseconds",
      "default": 0,
      "examples": [ "500", "caption-lines=\"1000\"" ],
      "category": "behavior",
      "addedIn": "v2.14.6"
    },

    "crossorigin": {
      "type": "String",
      "desc": "Same syntax as <img> crossorigin attribute",
      "values": [ "anonymous", "use-credentials" ],
      "category": "behavior"
    },

    "decoding": {
      "type": "String",
      "desc": "Same syntax as <img> decoding attribute",
      "values": [ "sync", "async", "auto" ],
      "category": "behavior"
    },

    "referrerpolicy": {
      "type": "String",
      "desc": "Same syntax as <img> referrerpolicy attribute",
      "values": [
        "no-referrer",
        "no-referrer-when-downgrade",
        "origin",
        "origin-when-cross-origin",
        "same-origin",
        "strict-origin",
        "strict-origin-when-cross-origin",
        "unsafe-url"
      ],
      "category": "behavior"
    },

    "fetchpriority": {
      "type": "String",
      "desc": "Provides a hint of the relative priority to use when fetching the image",
      "default": "auto",
      "values": [ "high", "low", "auto" ],
      "category": "behavior",
      "addedIn": "v2.6.6"
    },

    "fit": {
      "type": "String",
      "desc": "How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop",
      "default": "cover",
      "values": [ "cover", "fill", "contain", "none", "scale-down" ],
      "category": "style"
    },

    "position": {
      "type": "String",
      "desc": "The alignment of the image into the container; Equivalent of the object-position CSS prop",
      "default": "50% 50%",
      "examples": [ "0 0", "20px 50px" ],
      "category": "style"
    },

    "alt": {
      "type": "String",
      "desc": "Specifies an alternate text for the image, if the image cannot be displayed",
      "examples": [ "Two cats" ],
      "category": "miscellaneous"
    },

    "draggable": {
      "type": "Boolean",
      "desc": "Adds the native 'draggable' attribute",
      "category": "miscellaneous"
    },

    "img-class": {
      "type": "String",
      "desc": "CSS classes to be attributed to the native img element",
      "examples": [
        "my-special-class"
      ],
      "category": "style"
    },

    "img-style": {
      "type": "Object",
      "tsType": "VueStyleObjectProp",
      "desc": "Apply CSS to the native img element",
      "examples": [ ":img-style=\"{ transform: 'rotate(45deg)' }\" "],
      "category": "style"
    },

    "spinner-color": {
      "extends": "color",
      "desc": "Color name for default Spinner (unless using a 'loading' slot)",
      "category": "style"
    },

    "spinner-size": {
      "extends": "size",
      "desc": "Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot)",
      "category": "style"
    },

    "no-spinner": {
      "type": "Boolean",
      "desc": "Do not display the default spinner while waiting for the image to be loaded; It is overriden by the 'loading' slot when one is present",
      "category": "behavior"
    },

    "no-native-menu": {
      "type": "Boolean",
      "desc": "Disables the native context menu for the image",
      "category": "behavior"
    },

    "no-transition": {
      "type": "Boolean",
      "desc": "Disable default transition when switching between old and new image",
      "category": "behavior"
    }
  },

  "slots": {
    "default": {
      "desc": "Default slot can be used for captions. See examples"
    },

    "loading": {
      "desc": "While image is loading, this slot is being displayed on top of the component; Suggestions: a spinner or text"
    },

    "error": {
      "desc": "Optional slot to be used when image could not be loaded; make sure you assign a min-height and min-width to the component through CSS"
    }
  },

  "events": {
    "load": {
      "desc": "Emitted when image has been loaded by the browser",
      "params": {
        "src": {
          "type": "String",
          "desc": "URL of image that has been loaded; useful when using 'srcset' and/or 'sizes'",
          "examples": [
            "https://some-site.net/some-img.gif"
          ]
        }
      }
    },

    "error": {
      "desc": "Emitted when browser could not load the image",
      "params": {
        "evt": {
          "type": "Event",
          "desc": "JS Event object (same as the browser's native 'error' event)"
        }
      }
    }
  }
}
